<template>
  <view class="rolepop">
    <u-popup :show="show" :round="20" mode="center" @touchmove.stop.prevent="movehandle" @close="$emit('update:showFlag', false)" :safeAreaInsetBottom="false">
      <view class="box">
        <view class="header flex-row items-center">
          <up-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/title.png" width="10rpx" height="32rpx"></up-image>
          <view class="left u-margin-left-12"> 请选择{{ title }} </view>
        </view>
        <view class="content">
          <scroll-view scoll-y style="flex: 1">
            <u-radio-group v-model="selectBox" @change="handleSelect" placement="column">
              <view v-for="item in tabStore.roleList" :key="item.id" class="flex-row items-center justify-between flex-cell">
                <view style="flex: 1; padding: 24rpx 0 0">
                  <u-radio activeColor="#0000A6" :label="item.title" :name="item.id" shape="circle" labelSize="14" labelColor="#1B1A1D"></u-radio>
                </view>
              </view>
            </u-radio-group>
            <view v-if="!tabStore.roleList?.length" class="flex-row justify-center items-center">
              <u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"> </u-empty>
            </view>
          </scroll-view>
          <view class="u-padding-24">
            <AsaButton text="确认" type="primary" :customStyle="{ borderRadius: '16rpx', height: '86rpx', fontWeight: 500 }" @click="handleCommit" :loading="nextLoading"></AsaButton>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { watch, ref, reactive, computed, toRaw } from 'vue';
import OrderOptCell from '@/component/home/order-cell/optcell.vue';
import AsaButton from '@/component/common/button/index.vue';
import {getCache, setCache} from '@/easy-uni3/cache'

import useTabs from '@/lib/store/tab';
const tabStore = useTabs();

const props = defineProps({
  showFlag: { type: Boolean, default: false }, // 双向绑定的数据,控制弹窗打开关闭
  title: { type: String, default: '' }, // 标题
});
const show = ref<boolean>(false);
const selectBox: any = ref();

watch(
  () => props.showFlag,
  (val) => {
    if (val) {
      if (!selectBox.value) {
        let info = tabStore.roleList?.length && tabStore.roleList[0];
        selectBox.value = info.id;
        tabStore.setRoleInfo(info);
      }
    }
  }
);

const emit = defineEmits(['update:showFlag', 'on-confirm', 'clear']);
watch(
  () => props.showFlag,
  async (newVal, oldVal) => {
    show.value = newVal;
  },
  { immediate: true }
);
function movehandle() {}

function handleSelect(val: any) {
  console.log('handleSelect', val);
  const obj = tabStore.roleList.find((item: any) => item.id === val);
  if (obj) {
    tabStore.setRoleInfo(obj);
  }
}
function handleCommit() {
  const currentInfo = tabStore.roleInfo;
  if (!currentInfo.identity) {
    uni.$uv.toast('账户异常');
    return;
  }
  console.log('确认=====', currentInfo);
  uni.setStorageSync('token', currentInfo.identity);
  uni.reLaunch({
    url: tabStore.roleTabs[0].pagePath,
  });
}
</script>

<style lang="scss" scoped>
.rolepop {
  .noradio {
    ::v-deep .u-radio__icon-wrap--circle {
      background-color: #fff !important;
      border-color: #c8c9cc !important;
    }
  }
  .box {
    width: 100%;
    max-height: 800rpx;
    font-size: $uni-font-size-lg;
    display: flex;
    flex-direction: column;
    .flex-cell {
      flex: 1;
      padding-left: 24rpx;
      width: 80vw;
    }
    .header {
      padding: 24rpx 30rpx 24rpx;
      border-bottom: 2rpx solid #f4f5f8;
      height: 52rpx;
      line-height: 52rpx;
      .left {
        float: left;
        height: 52rpx;
        font-weight: 500;
        color: #1b1a1d;
        font-size: 32rpx;
      }
      .right {
        float: right;
        height: 52rpx;
      }
    }
    .clear {
      font-weight: 400;
      color: #7f7f7f;
      line-height: 36rpx;
      font-size: 26rpx;
      padding-left: 10rpx;
    }
    .content {
      height: 100%;
    }
    .footer {
    }
    .slabel {
      font-weight: 400;
      color: #1b1a1d;
      font-size: 28rpx;

      line-height: 36rpx;
    }
  }
}
</style>
